<template>
  <div class="topbar">
    <!-- LOGO -->
    <div class="topbar-left">
      <a class="logo">
        <span>
          The
          <span>fature</span>
        </span>
        <i class="zmdi zmdi-layers"></i>
      </a>
    </div>

    <!-- Button mobile view to collapse sidebar menu -->
    <div class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Page title -->
        <ul class="nav navbar-nav navbar-left">
          <li>
            <button class="button-menu-mobile open-left">
              <i class="zmdi zmdi-menu"></i>
            </button>
          </li>
          <li>
            <h4 class="page-title">
              <span class="ti-home"></span>
              <span class="ti-angle-right"></span>

              <div class="btn-group">
                <button
                  type="button"
                  class="btn btn-inverse waves-effect waves-light m-b-5 dropdown-toggle waves-effect"
                  data-toggle="dropdown"
                  aria-expanded="false"
                >
                  Create 
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <a href="#">新建文件夹</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">新建文本文件</a>
                  </li>
                </ul>
              </div>
            </h4>
          </li>
        </ul>

        <!-- Right(Notification and Searchbox -->
        <ul class="nav navbar-nav navbar-right">
          <li>
            <!-- Notification -->
            <div class="notification-box">
              <ul class="list-inline m-b-0">
                <li>
                  <a href="javascript:void(0);" class="right-bar-toggle">
                    <i class="zmdi zmdi-notifications-none"></i>
                  </a>
                  <div class="noti-dot">
                    <span class="dot"></span>
                    <span class="pulse"></span>
                  </div>
                </li>
              </ul>
            </div>
            <!-- End Notification bar -->
          </li>
          <li class="hidden-xs">
            <form role="search" class="app-search">
              <input type="text" placeholder="Search..." class="form-control">
              <a href>
                <i class="fa fa-search"></i>
              </a>
            </form>
          </li>
        </ul>
      </div>
      <!-- end container -->
    </div>
    <!-- end navbar -->
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  props: {
    page_title: String
  }
};
</script>
